<template>
    <div id="login-tab" >
        <div class="container">
            <nut-tabs v-model="state.tab1value" type="line" style="padding: 18px;" background="#ffffff">
                <nut-tabpane title="登录">
                    <div>
                        <nut-icon name="dongdong" size="100" style="margin-top: 14%;"></nut-icon>
                    </div>
                    <div class="login">
                        <nut-input left-icon="my" v-model="profile.id" placeholder="学号或工号" />
                        <nut-input v-model="profile.password" left-icon="edit" clearable type="password" placeholder="请输入密码" />
                    </div>
                    <div style="padding: 5%">
                        <nut-button :loading="isLoading" :type="loginBtnType" style="width: 50%;" @click="login()">{{ loginText }}</nut-button>
                    </div>
                </nut-tabpane>
                <nut-tabpane title="注册">
                    <div style="margin: 8% 5% 0% 5%;">
                        <nut-input left-icon="people" v-model="registerInfo.name" clearable placeholder="姓名" />
                        <nut-input left-icon="my" v-model="registerInfo.id"  clearable placeholder="学号或工号" />
                        <nut-input left-icon="edit" v-model="registerInfo.password"  clearable type="password" placeholder="请输入密码" />
                        <nut-input left-icon="edit" v-model="pswConfirm" clearable type="password" placeholder="请确认密码" />
                        <nut-row>
                            <nut-col :span="14">
                                <nut-input left-icon="notice" v-model="verCode" placeholder="验证码" />
                            </nut-col>
                            <nut-col :span="10">
                                <img :src="verCodeUrl" alt="点我刷新" style="margin-top: 8px;" @click="freshVerCode">
                            </nut-col>
                        </nut-row>
                    </div>
                    <div style="padding: 5%">
                        <nut-button type="default" style="width: 50%;" @click="register">注册</nut-button>
                    </div>
                </nut-tabpane>
            </nut-tabs>
        </div>
    </div>
</template>

<script>
import { reactive, ref } from "vue";
import axios from "axios";
import common from "../Common.vue";
import { Toast } from "@nutui/nutui";
import '../assets/font/iconfont.css';

export default {
    name: "login-tab",
    mounted() {
        this.freshVerCode();
    },
    setup() {
        // 刷新改善样式不理想的问题
        // const isReloaded = ref(false);
        // if(location.href.indexOf("#reloaded") == -1){
        //     location.href=location.href+"#reloaded";
        //     location.reload();
        //     isReloaded.value = true;
        // }
        const state = reactive({
            tab11value: "0",
        });
        let loginBtnType = ref("default");
        let isLoading = ref(false);
        let loginText = ref("登录");
        const changeLoading = () => {
            loginBtnType.value = "info";
            isLoading.value = true;
            loginText.value = "";
            setTimeout(() => {
                isLoading.value = false;
                loginText.value = "登录";
                loginBtnType.value = "default";
            }, 3000);
        };
        return {
            state,
            isLoading,
            changeLoading,
            loginBtnType,
            loginText,
            // isReloaded
        };
    },
    data() {
        return {
            profile: {
                id: "",
                password: "",
            },
            registerInfo: {
                id: "",
                name: "",
                sex: "0",
                password: "",
                status: "0",
                temperature: "36.0",
                virustest: "测试核酸信息",
                role: "0",
                trip: "暂无行程信息"
            },
            pswConfirm: "",
            verCode: "",
            verCodeUrl: "",
            user: {
                id: "",
                name: "czy",
                sex: 0,
                password: "",
                status: 0,
                temperature: "暂无体温信息",
                virustest: "暂无核酸信息",
                role: 0,
                tirp: "暂无行程信息"
            },
        };
    },
    methods: {
        // 获取验证码
        freshVerCode: function () {
            axios
                .get(common.apiUrl + "/api/getImage")
                .then((res) => {
                    this.verCodeUrl = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        login: function () {
            // 文本框判空
            if (this.profile.id == "") {
                Toast.fail("请输入账号！");
                return;
            } else if (this.profile.password == "") {
                Toast.fail("请输入密码！");
                return;
            }
            // TODO 登录变了以后很有问题
            this.changeLoading();
            axios
                .post(common.apiUrl + "/api/login", this.profile)
                .then((res) => {
                    // 变成加载模式
                    if (!res.data.state) {
                        Toast.text(res.data.msg);
                    } else {
                        // 登录成功
                        if (res.data.role == 0 || res.data.role == 1 || res.data.role == 2) 
                            this.$router.push('user')
                        else
                            this.$router.push('admin')
                        // 将用户部分信息存入全局变量中
                        common.setLoginState({ id: this.profile.id, role: res.data.role })
                    }
                    // console.log(res);
                });
        },
        register: function () {
            // 文本框判空
            if (this.registerInfo.name == "") {
                Toast.fail("请输入姓名！");
                return;
            } else if (this.registerInfo.id == "") {
                Toast.fail("请输入学号或工号！");
                return;
            } else if (this.registerInfo.password == "") {
                Toast.fail("请输入密码！");
                return;
            } else if (this.pswConfirm == "") {
                Toast.fail("请输入确认密码！");
                return;
            } else if (this.verCode == "") {
                Toast.fail("请输入验证码！");
                return;
            } else if (this.registerInfo.password != this.pswConfirm) {
                Toast.fail("两次密码输入不一致！");
                return;
            }
            // 注册
            axios
                .post(
                    common.apiUrl + "/api/register?code=" + this.verCode,
                    this.registerInfo
                )
                .then((res) => {
                    if (!res.data.state) {
                        Toast.text(res.data.msg);
                    } else {
                        Toast.text(res.data.msg);
                        // 清空输入框
                        this.registerInfo.id = "";
                        this.registerInfo.name = "";
                        this.registerInfo.password = "";
                        this.verCode = "";
                        this.pswConfirm = "";
                        this.state.tab11value = "0";
                    }

                    // console.log(res);
                });
        },
    },
};
</script>

<style>
#login-tab {
    width: 100%;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 85%;
    background-color: #ffffff;
    /* overflow: scroll; */
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    box-shadow: 10px 10px 5px rgba(48, 48, 48, 0.5);
}
.icon-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>